<template>
    <van-form class="input-edit-form">
        <slot name="global-config"></slot>
        <h2 class="form-group-label">
            编辑文字
        </h2>
        <quill-editor v-model="data.value"
                      :options="editorOption"
                      :style="{
                      animation: 'hideIndex 0.5s',
        }"
        ></quill-editor>
        <Del :id="data.id"></Del>
    </van-form>
</template>

<style lang="css">
    .input-edit-form .ql-editor {
        min-height: 200px;
        background: white;
    }
</style>


<script>
    import Del from './../form/common/del'
    import { quillEditor } from 'vue-quill-editor'

    export default {
        components : {
            Del,
            quillEditor
        },
        props : {
           data : Object
        },
        mounted () {

        },
        data() {
            return {
                editorOption: {
                    modules: {
                        toolbar: [
                            ["bold", "italic", "underline", "strike"], // toggled buttons
                            [{
                                header: [
                                    false, 1, 2, 3, 4, 5, 6]
                            }
                            ],
                            [{
                                align: ""
                            }, {
                                align: "center"
                            }, {
                                align: "right"
                            }, {
                                align: "justify"
                            }], ["blockquote", "code-block"], [{
                                list: "ordered"
                            }, {
                                list: "bullet"
                            }, {
                                list: "check"
                            }], [{
                                indent: "-1"
                            }, {
                                indent: "+1"
                            }], // outdent/indent
                            [{
                                color: []
                            }, {
                                background: []
                            }], // dropdown with defaults from theme
                            ["clean"] // remove formatting button
                        ]
                    }
                }
            }
        },
        methods: {
            onSubmit() {
                //console.log(this.data.value)
                //console.log('submit!');
            }
        }
    }
</script>